<script setup>
    import { useStore } from 'vuex'
    import { onMounted } from 'vue'
    import { getDisabledSexList, getDisabledGenreList, getDisabledGradeList, getDisabledList } from '@/api/govern'

    const store = useStore()

    const props = defineProps({
        sysOrgCode: {
            type: [String, Number]
        }
    })
    
    // 获取列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 10
    })
    if(props.orgCode) filterParams.orgCode = props.orgCode
    else delete filterParams.orgCode

    // 是否展开
    let isUnfold = $ref(true)

    // 列表数据加载中
    let dataLoading = $ref(false)

    const getList = () => {
        dataLoading = true
        getDisabledList(filterParams).then(res => {
            dataLoading = false
            if(res.success){
                let { records, total } = res.result

                resData = records
                totalCount = total
            }
        })
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        let sysOrgCode = props.sysOrgCode ? filterParams.sysOrgCode : ''
        filterParams = {
            pageNo: 1,
            pageSize: 10,
            sysOrgCode
        }
    }

    let sexList = $ref([
        { itemText: '男', itemValue: '1' },
        { itemText: '女', itemValue: '2' }
    ])
    let genreList = $ref([])
    let gradeList = $ref([])

    onMounted(() => {
        // 残疾人类型
        getDisabledGenreList().then(res => {
            genreList = res.result
        })

        // 残疾人等级
        getDisabledGradeList().then(res => {
            gradeList = res.result
        })
        
    })

    const emit = defineEmits(['handleClickDetials'])

    // 点击详情 
    const handleClick = (id) => {
        emit('handleClickDetials', id)
    }



</script>

<template>
    <div class="xz-filter-wrap">
        <el-form :inline="true" :label-width="85">

            <el-form-item label="行政村">
                <el-select v-model="filterParams.orgCode" placeholder=" " clearable @clear="delete filterParams.orgCode">
                    <el-option
                        v-for="(item, index) in store.state.villageList"
                        :key="index"
                        :label="item.departName"
                        :value="item.orgCode"
                    >
                        {{ item.departName }}
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="filterParams.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="filterParams.idCard" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="filterParams.sex" placeholder=" " clearable @clear="delete filterParams.sex">
                    <el-option
                        v-for="(item, index) in sexList"
                        :key="index"
                        :label="item.itemText"
                        :value="item.itemValue"
                    >
                        {{ item.itemText }}
                    </el-option>
                </el-select>
            </el-form-item>
            <template v-if="isUnfold">
                <el-form-item label="残疾类别">
                    <el-select v-model="filterParams.s3" placeholder=" " clearable @clear="delete filterParams.s3">
                        <el-option
                            v-for="(item, index) in genreList"
                            :key="index"
                            :label="item.itemText"
                            :value="item.itemValue"
                        >
                            {{ item.itemText }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="残疾等级">
                    <el-select v-model="filterParams.s4" placeholder=" " clearable @clear="delete filterParams.s4">
                        <el-option
                            v-for="(item, index) in gradeList"
                            :key="index"
                            :label="item.itemText"
                            :value="item.itemValue"
                        >
                            {{ item.itemText }}
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
        </el-form>

        <div class="btn-wrap flex-center"> 
            <div class="btn reset-btn" @click="handleClickReset">重置</div>
            <div class="btn search-btn" @click="hadleSearch">查询</div>
        </div>

        <div class="fold flex-center" @click="isUnfold=!isUnfold">
            {{ isUnfold ? '收起' : '展开' }}
            <i class="arrow" :class="{ 'arrow-top': isUnfold }"></i>
        </div>


    </div>

    <div class="xz-filter-list mt10" v-loading="dataLoading">
        <div class="result-title">
            查询结果
            <span class="result-count">共{{ totalCount }}条</span>
        </div>
        <el-table 
            :data="resData" 
            style="width: 100%"
            :height="isUnfold ? 363 : 411"
            size="large"
            class="xz-table"
            :scrollbar-always-on="true"
        >
            <el-table-column type="index" label="序号" min-width="60" align="center" />
            <el-table-column prop="name" label="姓名" min-width="65" />
            <el-table-column prop="sex_dictText" label="性别" min-width="65" align="center" />
            <el-table-column prop="idCard" label="身份证号码" min-width="180" />
            <el-table-column prop="orgCode_dictText" label="所属村" min-width="150" />
            <el-table-column prop="s1" label="街道区划" min-width="120" />
            <el-table-column prop="s2" label="社区区划" min-width="120" />
            <el-table-column prop="s3_dictText" label="残疾类别" min-width="120" />
            <el-table-column prop="s4_dictText" label="残疾等级" min-width="120" />
            <el-table-column prop="s5" label="残疾详情" min-width="150" />
            <el-table-column prop="s6" label="有效期开始时间" min-width="120" />
            <el-table-column prop="s7" label="持证状态" min-width="120" />
            <el-table-column prop="s8" label="是否目测评定" min-width="100" />
            <el-table-column prop="s9" label="最后操作类型" min-width="120" />
            <el-table-column prop="s10" label="最后操作时间" min-width="120" />
            <el-table-column prop="s11" label="初次发证时间" min-width="120" />
            <el-table-column prop="remark" label="操作" min-width="90">
                <template #default="scope">
                    <el-link type="primary" @click="handleClick(scope.row.idCard)">详情</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination 
            class="mt20" 
            background 
            layout="total, sizes, prev, pager, next" 
            :total="totalCount" 
            :page-size="filterParams.pageSize"
            :current-page="filterParams.pageNo"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />

    </div>

</template>